<style>
    .upDiv{display: flex;}
    .fileOne{display: flex;flex-direction: column;position: relative;}
    .imgClose{position: absolute;top: 5px;right: 5px;cursor: pointer;}
    .fileOne img{width: 100px;height: 100px;}
    .fileOne p{text-align: center;}
</style>
<div class="layui-form-item">
		<label class="layui-form-label">图片集</label>
		<div class="layui-input-inline">
				<input type="text" name="files" id="files" readonly value="[value]" lay-verify="required" placeholder=""
					   autocomplete="off" class="layui-input">
		</div>
		<input type="file" id="selectFile" style="display: none;">

</div>
<div class="layui-form-item">
		<label class="layui-form-label">附件预览</label>
		<div class="layui-input-inline">
				<div class="upDiv">
						<!--						<div class="fileOne">-->
						<!--								<img src="">-->
						<!--								<div class="imgClose">X</div>-->
						<!--						</div>-->

				</div>
		</div>

</div>
<script>
    var $fileData=""
    $("#files").click(function () {
        $("#selectFile").click()
    })
    $(function (){
        var $imgs = $("input[name='files']").val()
        var $arr = $imgs.split(",")
        for (var i in $arr){
            var d =$arr[i]
            if(d.length<1){
                break;
            }
            if(d.indexOf(".jpg")!=-1){
                var temUrl = d
            }else{
                var temUrl = "/static/img/file.jpg"
            }
            var html="<div class=\"fileOne\">\n" +
                "\t\t\t\t\t\t\t\t<img data-url=\""+d+"\" src=\""+temUrl+"\">\n" +
                "\t\t\t\t\t\t\t\t<div class=\"imgClose\">X</div>\n" +
                "\t\t\t\t\t\t</div>";
            $(".upDiv").append(html)
        }
    })
    $(document).on("click",".imgClose",function (){
        var obj=$(this)
        layer.confirm("是否确定删除?",function (){
            var urls = $("#files").val()
            var path = obj.prev().data("url")
            var temArr = urls.split(",")
            for (var i in temArr){
                var d = temArr[i]
                if(d == path){
                    urls = urls.replace(d+",","")
                    urls = urls.replace(","+d,"")
                    urls = urls.replace(d,"")
                }
            }
            $("#files").val(urls)
            obj.parent().hide()
            layer.closeAll()
        })
    })
    $("#selectFile").change(function (){
        var file = $("#selectFile")[0].files[0]
        if(file==undefined){return false;}
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            url: '/includes/upload', // 上传图片的服务器端地址
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                // 上传成功后的处理逻辑 1
                layer.msg(res.msg)
                if(res.code == 0){
                    if(res.data.src.indexOf(".jpg")!=-1){
                        var temUrl = res.data.src
                    }else{
                        var temUrl = "/static/img/file.jpg"
                    }
                    var html="<div class=\"fileOne\">\n" +
                        "\t\t\t\t\t\t\t\t<img data-url=\""+res.data.src+"\" src=\""+temUrl+"\">\n" +
                        "\t\t\t\t\t\t\t\t<div class=\"imgClose\">X</div>\n" +
                        "\t\t\t\t\t\t</div>";
                    $(".upDiv").append(html)
                    var urls = $("#files").val()
                    if(urls==''){
                        $("#files").val(res.data.src)
                    }else{
                        $("#files").val(urls+","+res.data.src)
                    }

                }
            },
            error: function(xhr, status, error) {
                // 上传失败后的处理逻辑
            }
        });

    })
</script>